<template>
  <div>
    <el-container>
      <el-main>
        <el-row type="flex" justify="center">
          <el-col :span="17" class="cate">
            <el-col :span="5" class="cate-left">
              <div>
                <button class="postAc">发表文章</button>
              </div>
              <div class="cate-list">
                <ul>
                  <router-link to="/index/cate/all"
                    ><li>
                      <i class="el-icon-document"></i>&nbsp;&nbsp;全部文章
                    </li></router-link
                  >
                  <li @click="cateDialog = true" style="cursor: pointer;">
                    <i class="el-icon-coin"></i>&nbsp;&nbsp;归档
                  </li>
                </ul>
                <ul class="cate-detail">
                  <router-link
                    :to="'/index/cate/' + item"
                    v-for="(item, index) in AllArticles"
                    :key="index + item"
                    ><li>
                      <i
                        :class="index % 2 == 0 ? 'cateIcon-1' : 'cateIcon-2'"
                      ></i
                      >&nbsp;&nbsp;{{ item }}
                    </li></router-link
                  >
                </ul>
              </div>
            </el-col>
            <el-col :span="19">
              <router-view></router-view>
            </el-col>
          </el-col>
        </el-row>
      </el-main>
      <el-dialog
        title="归档"
        :visible.sync="cateDialog"
        width="30%"
        top="10%"
        @open="getTimeAxis"
        center
      >
        <el-row>
          <el-col :span="24">
            <el-col :span="24">
              <div class="cate-item">
                <div class="block">
                  <el-timeline>
                    <el-timeline-item
                      v-for="item in TimeCate"
                      :key="item+'1'"
                      :timestamp="item | dateFormatter"
                      placement="top"
                    >
                      <el-card>
                        <h4>更新 文章</h4>
                        <p>小武 提交于 {{ item | dateFormatter}}</p>
                      </el-card>
                    </el-timeline-item>
                  </el-timeline>
                </div>
              </div>
            </el-col>
          </el-col>
        </el-row>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cateDialog: false,
      AllArticles: [],
      TimeCate: [],
    };
  },
  created() {
    this.getArticles();
  },
  methods: {
    getArticles() {
      this.$axios({
        method: "get",
        url: "/getCateogrys",
      }).then((res) => {
        console.log(res.data.data);
        this.AllArticles = res.data.data;
      });
    },
    getTimeAxis() {
      this.$axios({
        method: "get",
        url: "/getAddTime",
      }).then((res) => {
        console.log(res.data.data);
        this.TimeCate = res.data.data;
      });
    },
  },
  filters: {
    dateFormatter(time) {
      let date = time.replace(/-/g, "/");
      date = date.substring(0,10)
      return date
    },
  },
};
</script>

<style lang="less" scoped>
.el-row {
  .cate-left {
    color: #4d698e;
    font-weight: normal;
    padding: 10px;
    .postAc {
      display: inline-block;
      width: 100%;
      height: 36px;
      border-radius: 5px;
      border: none;
      color: #fff;
      background-color: #4d698e;
      &:hover {
        background-color: #3b516d;
        cursor: pointer;
      }
    }
    .cate-list {
      margin-top: 25px;
      ul {
        list-style: none;
        li {
          padding: 10px;
        }
      }
      .cate-detail {
        margin-top: 20px;
        .cateIcon-1 {
          display: inline-block;
          height: 15px;
          width: 15px;
          background-color: rgb(98, 98, 98);
          border-radius: 5px;
        }
        .cateIcon-2 {
          display: inline-block;
          height: 15px;
          width: 15px;
          background-color: rgb(177, 108, 98);
          border-radius: 5px;
        }
      }
    }
  }
}
.cate-item {
  height: 300px;
  overflow-y: auto;
}
.router-link-active {
  color: blue;
}
.linkActiveClass {
  color: #3b516d;
}
</style>
